import React, { Component } from 'react'
import './Item.css'
export default class Item extends Component {
  state = {
    tN: '', // 用于控制编辑文本框中的值
  }
  render() {
    const {
      todo: { todoName, isDone, id }, // 解构props里面的todo之后,再解构todo对象
      editId,
    } = this.props
    return (
      <li>
        {editId !== id ? (
          <label>
            {/* 注意: react组件中的表单元素的值如果被控制了, 则必须配合一个onChange.onChange用来修改控制数据,从而让表单元素的值发生变化 */}
            <input
              type="checkbox"
              checked={isDone}
              onChange={(e) => {
                // console.log(e.target.checked) // 注意: 虽然复选框被控制了,点击也没有效果,但是可以通过e.target.checked拿到目标值
                // 将当前任务的id传递给app
                this.props.updateTodo(id)
              }}
            />
            <span className={isDone ? 'done' : ''}>{todoName}</span>
          </label>
        ) : (
          <input
            type="text"
            value={this.state.tN}
            onChange={(e) => {
              // 由于文本框的值被当前状态tN控制了,所以用户也无法输入,如果想让用户输入,就必须绑定onChange事件,在事件处理函数中通过e.target.value获取用户输入,然后赋值给tN
              this.setState({
                tN: e.target.value.trim(),
              })
            }}
            onKeyUp={(e) => {
              if (!this.state.tN || e.key !== 'Enter') return
              this.props.setTodoName(id, this.state.tN)
            }}
          />
        )}
        <button
          className="btn btn-danger"
          onClick={() => {
            if (!confirm('确定要删除这条数据吗')) return
            this.props.delTodo(id)
          }}
        >
          删除
        </button>
        <button
          className="btn btn-edit"
          onClick={() => {
            // 由于tN决定了编辑文本框的内容,所以点击编辑按钮的时候,将任务名赋值给tN,则编辑文本框就会展示当前任务名
            this.setState({
              tN: todoName,
            })
            this.props.setEditId(editId !== id ? id : undefined)
          }}
        >
          {editId !== id ? '编辑' : '取消'}
        </button>
      </li>
    )
  }
}
